<template>
    <common-modal
        ref="modalRef"
        v-bind="attrs"
        @sure="search"
        @cancel="handleCancel"
        @before-close="reset"
        @open="handleOpen"
    >
        <el-form
            label-width="110px"
            :rules="rules"
            ref="formRef"
            :inline="false"
            :model="formData"
        >
            <el-form-item label="配置类型：" prop="mname">
                <el-select style="width: 100%" placeholder="请选择配置类型">
                    <el-option v-for="item in settingList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="配置标题：" prop="path">
                <el-input
                    v-model="formData.path"
                    placeholder="请输入配置标题"
                    clearable
                />
            </el-form-item>
            <el-form-item label="配置名称：" prop="router">
                <el-input
                    v-model="formData.router"
                    placeholder="请输入配置名称"
                    clearable
                />
            </el-form-item>
            <el-form-item label="配置值：" prop="router">
                <el-input
                    v-model="formData.router"
                    placeholder="请输入配置值"
                    clearable
                    type="textarea"
                />
            </el-form-item>
            <el-form-item label="配置说明：" prop="router">
                <el-input
                    v-model="formData.router"
                    placeholder="请输入配置说明"
                    type="textarea"
                    clearable
                />
            </el-form-item>
            <el-form-item label="状态：" prop="state">
                <el-radio-group v-model="formData.state">
                    <el-radio :label="0">禁用</el-radio>
                    <el-radio :label="1">正常</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </common-modal>
</template>
<script>
export default {
    inheritAttrs: false,
};
</script>
<script setup>
import { reactive, useAttrs, ref } from "vue";
import commonModal from "@/components/commonModal.vue";
import useForm from "@/hooks/useForm";
import { AddSetting, EditSetting } from "@/apis/system.js";
import { ElMessage } from "element-plus";
import { settingList } from '@/enums/index'
const attrs = useAttrs();
const props = defineProps({
    type: {
        type: String,
        default: "add",
    },
    curForm: {
        type: [Object, String],
        default: () => ({}),
    },
});
let formData = reactive({
    pmid: "ROOT",
    level: "",
    mname: "",
    path: "",
    router: "",
    state: 1,
});
const modalRef = ref(null);
const emits = defineEmits(["success"]);
// 确定
const handleSure = async () => {
    const optionApi = props.type === 'add' ? AddSetting : EditSetting
    await optionApi(formData);
    ElMessage.success({
        message: "操作成功",
        type: "success",
    });
    emits("success");
    handleCancel();
};
const { formRef, search, reset } = useForm(handleSure);
const rules = {
    mname: [{ required: true, message: "请输入模块名称", trigger: "change" }],
    path: [{ required: true, message: "请输入API路由", trigger: "change" }],
    router: [{ required: true, message: "请输入前端路由", trigger: "change" }],
    type: [{ required: true, message: "请选择模块类型", trigger: "change" }],
};

// 取消 关闭弹窗
const handleCancel = () => {
    modalRef.value?.close();
};
// 打开弹窗
const handleOpen = () => {
    const { type, curForm } = props;
    if (type === "add") {
        Object.assign(formData, {
            mid: "",
            pmid: "ROOT",
            level: 1,
            mname: "",
            path: "",
            router: "",
            type: "",
        });
    } else {
        Object.assign(formData, curForm);
    }
};
</script>
